<script lang="ts" setup>
import { useFormatDate } from 'co-utils-vue';

import { getArticleItemDetailById, getArticleRecentByUid } from '@/api/article';
import { IArticleItem } from '@/api/article/type';
import CoBannerPage from '@/components/cz-banner-page/index.vue';
import { useCalculateReadability } from '@/hooks/use-utils/helper';
import Preview from '@/modules/article/detail/Preview.vue';

const article = ref<IArticleItem>({} as IArticleItem);
const route = useRoute();
/**
 * 作者近期文章
 */
const authorSRecentArticles = ref<IArticleItem[]>([]);
const countInfo = ref({
  wordCount: '',
  readingTime: ''
});
const getArticle = () => {
  const { uid } = route.params;
  if (!uid) return;
  getArticleItemDetailById(uid as string).then(res => {
    article.value = res;
    document.title = res.title;
    countInfo.value = useCalculateReadability(res.content || '');
  });
  getArticleRecentByUid(uid as string).then(res => {
    authorSRecentArticles.value = res;
  });
};
getArticle();
</script>

<template>
  <div>
    <co-banner-page>
      <p>
        <cz-typing
          :text="article.title"
          class="description"
        />
      </p>
      <div class="cz-text-white">
        <div class="md:cz-w-[672px]">
          <div class="cz-tracking-widest cz-flex cz-text-center cz-items-center cz-justify-center">
            <div class="cz-pr-[10px] cz-pl-[10px]">
              <i class="bi bi-box" />
              字数：{{ countInfo.wordCount }}
            </div>
            <div class="cz-pr-[10px] cz-pl-[10px]">
              <i class="bi bi-hourglass-bottom" />
              预计阅读时长：{{ countInfo.readingTime }}
            </div>
          </div>
          <div class="cz-flex cz-text-center cz-items-center cz-justify-center">
            <div class="cz-pr-[10px] cz-pl-[10px]">
              <i class="bi bi-calendar2-check" />
              发布时间：{{ useFormatDate(article.createDate, 'yyyy-MM-dd HH:mm') }}
            </div>
            <div
              v-if="false"
              class="cz-pr-[10px] cz-pl-[10px]"
            >
              <i class="bi bi-calendar2-check" />
              更新时间：{{ useFormatDate(new Date(), 'yyyy-MM-dd HH:mm') }}
            </div>
          </div>
        </div>
      </div>
    </co-banner-page>
    <div>
      <preview
        :recent-item="authorSRecentArticles"
        :row-item="article"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.description {
  margin: 1.8rem auto;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #fff;
  transition: transform 0.25s ease-in-out 0.08s,
  opacity 0.25s ease-in-out 0.08s;
  transform: translateY(0px);
  opacity: 1;
}
</style>
